<template>
  <div class="passport-area flx-row-c-c">
    <div class="box-area box-size">
      <div class="login-tab-area flx-row-c-c">
        <div class="item active">欢迎注册</div>
      </div>
      <div class="login-main-area flx-col-s-c">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <template v-if="active == 0">
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2">手机号码</div>
            <Input
              v-model.trim="phone"
              placeholder="请输入手机号"
              maxlength="11"
              type="tel"
              size="large"
            />
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2" style="letter-spacing: 8px">
              验证码
            </div>
            <Input
              v-model="code"
              placeholder="请输入验证码"
              maxlength="6"
              size="large"
            />
            <div
              class="user-normal-button code-button"
              style="width: 100px"
              :class="[
                getCodeAvailable ? 'user-normal-button' : 'forbid-button',
              ]"
              @click="getCode"
            >
              {{ getCodeContent }}
            </div>
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15">
            <div class="title f-14 c-d2">设置密码</div>
            <Input
              name="rpassword"
              v-model="password"
              type="password"
              password
              placeholder="请输入登录密码"
              maxlength="16"
              @keydown.native="keydown($event)"
              autocomplete="new-password"
              size="large"
            />
          </div>
          <div class="flx-row-bw-c w-p-100 mg-b-15" style="margin-bottom: 8px">
            <div class="title f-14 c-d2">确认密码</div>
            <Input
              v-model="passwordAgain"
              name="rpassworda"
              type="password"
              password
              placeholder="请再次输入登录密码"
              maxlength="16"
              @keydown.native="keydown($event)"
              autocomplete="new-password"
              size="large"
            />
          </div>
          <div class="f-12 mg-b-15 c-g w-p-100" style="padding-left: 80px">
            密码至少8个字符，最多16个字符
          </div>
          <slider class="mg-b-15" @success="sliderSuccess"></slider>
          <div
            class="user-strong-button big-button-size-40 w-p-100 mg-b-15"
            @click="submit"
          >
            立即注册
          </div>
          <span class="c-d2 f-14"
            >已有190账户？<router-link to="/login" class="font-b-bottom"
              >立即登录</router-link
            ></span
          >
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { register, getCode, getPublicKey } from "@/api/user";
import { validMobile, validPassword } from "@/utils/validate.js";
import JSEncrypt from "jsencrypt";
export default {
  components: {
    slider: () => import("_c/slider/slider.vue"),
  },
  name: "VipLogin",
  data() {
    return {
      // 是否加载中
      loading: false,

      // 标题数据
      active: 0,

      // 表单数据
      phone: "",
      code: "",
      password: "",
      passwordAgain: "",

      // 获取验证码数据
      // 是否可以获取验证码
      getCodeAvailable: true,
      // 获取验证码按钮上的文字
      getCodeContent: "获取验证码",
      // 获取验证码定时器
      getCodeInterval: null,

      // 验证数据
      checkSuccess: false,
    };
  },
  created() {
    this.getPublicKey();
  },
  mounted() {
    // this.submit()
  },
  methods: {
    async getPublicKey() {
      if (!this.$storage.getPublicKey()) {
        let res = await getPublicKey();
        if (res.code == 200) {
          this.$storage.setPublicKey(res.data);
        }
      }
    },
    getEncrypt(data) {
      let encrypt = new JSEncrypt();
      // 设置公钥
      encrypt.setPublicKey(this.$storage.getPublicKey());
      return encrypt.encrypt(data);
    },
    sliderSuccess() {
      this.checkSuccess = true;
    },
    submit() {
      if (!validMobile(this.phone)) {
        this.$Message.warning("请输入正确的手机号码！");
        return;
      }
      if (this.code == null || this.code.length < 6) {
        this.$Message.warning("请输入正确的手机验证码！");
        return;
      }
      if (!validPassword(this.password)) {
        this.$Message.warning("请按要求输入密码！");
        return;
      }
      if (this.passwordAgain == null || this.passwordAgain == "") {
        this.$Message.warning("请再次输入密码！");
        return;
      }
      if (this.password != this.passwordAgain) {
        this.$Message.warning("两次密码输入不一致！");
        return;
      }
      if (!this.checkSuccess) {
        this.$Message.warning("请进行滑块验证！");
        return;
      }
      this.register();
    },
    async register() {
      this.loading = true;
      let data = {
        confirmPassword: this.getEncrypt(this.passwordAgain),
        mobile: this.phone,
        password: this.getEncrypt(this.password),
        smsCode: this.code,
        source: 1,
      };
      let res = await register(data);
      if (res.code == 200) {
        this.$Message.success("注册成功，快去登录吧！");
        this.$router.replace("/login");
      }
      this.loading = false;
    },
    // 密码输入过滤掉空格和回车
    keydown(event) {
      if (event.keyCode == 32 || event.keyCode == 13) event.returnValue = false;
    },
    /**
     * @description 获取验证码
     */
    async getCode() {
      if (!this.getCodeAvailable) return;
      if (!validMobile(this.phone)) {
        this.$Message.warning("请输入正确的手机号码！");
        return;
      }
      this.loading = true;
      let res = await getCode(this.phone);

      if (res.code == 200) {
        // this.code = res.data.vcode;
        this.getCodeAvailable = false;
        let i = 60;
        this.getCodeContent = `${i--}秒后再获取`;
        this.getCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.getCodeContent = "获取验证码";
            this.getCodeAvailable = true;
            clearInterval(this.getCodeInterval);
            return;
          }
          this.getCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-size {
  width: 700px;
}
.login-tab-area {
  width: 100%;
  padding-top: 50px;
  border-bottom: #d8d8d8 solid 1px;
  .item {
    width: 165px;
    border-bottom: transparent solid 2px;
    font-size: 22px;
    text-align: center;
    color: rgba(#3d3d3d, 0.7);
    cursor: pointer;
    margin: 0 10px;
    line-height: 40px;
    &:hover {
      color: #3d3d3d;
    }
    &.active {
      color: #3d3d3d;
      border-color: #f9521f;
    }
  }
}
.login-main-area {
  position: relative;
  padding: 50px 160px 70px;
}
.mg-b-15 {
  margin-bottom: 15px;
}
.title {
  width: 80px;
  flex-shrink: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
</style>